<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(238, 209, 171);
        }
        
        .box {
            background-color: rgb(238, 203, 129);
            position: relative;
            top: 100px;
            height: 550px;
            z-index: -4;
            padding-left: 30px;
            padding-top: 50px;
        }
        
        .hav {
            background-color: rgb(66, 57, 43);
            width: 430px;
            height: 590px;
            position: absolute;
            right: 500px;
            top: -80px;
            z-index: -2;
            box-shadow: 3px 3px 20px #c1c9c1;
        }
        
        .d {
            width: 200px;
            position: absolute;
            top: 110px;
            left: 80px;
        }
        
        .hav h3 {
            color: cornsilk;
        }
        
        .hav p {
            color: cornsilk;
        }
        
        .hav a {
            background-color: cornsilk;
            color: rgb(68, 80, 80);
            display: inline-block;
            width: 150px;
            height: 30px;
            text-decoration: none;
            text-align: center;
        }
        
        .hea {
            width: 350px;
            height: 350px;
            padding-left: 200px;
            margin-bottom: 50px;
            z-index: 1;
        }
        
        .hea img {
            box-shadow: 3px 3px 20px #c1c9c1;
            width: 400px;
            height: 350px;
        }
        
        .pick {
            background-color: rgb(245, 230, 190);
            height: 250px;
            width: 325px;
            position: absolute;
            bottom: -20px;
            left: 320px;
            box-shadow: 3px 3px 20px #c1c9c1;
        }
        
        .X {
            position: absolute;
            left: 30px;
            top: 30px;
        }
        
        .pick h3 {
            color: rgb(139, 51, 0);
        }
        
        .pick p {
            color: darkslategray;
        }
        
        .p {
            width: 200px;
            position: absolute;
            top: 110px;
            left: 80px;
        }
        
        .pick a {
            width: 140px;
            border: 2px solid #ffffff;
            display: inline-block;
            color: #ffffff;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="hav">
            <div class="d">
                <h3>Phliotphy</h3>
                <p>From a rough understanding of Marxism in high school to a deeper understanding of Marx in university, I have a general understanding of Marx.</p>
                <a href="#">memory of Marx </a>
            </div>
        </div>
        <div class="hea">
            <!-- <img src="https://via.placeholder.com/350px*350px" alt=""> -->
            <img src="-717e17273ade9b3b.jpg" alt="">
        </div>
        <div class="pick">
            <div class="X">
                <h3>Juxtaposed</h3>
                <p>From a rough understanding of Marxism in high school to a deeper understanding of Marx in university, I have a general understanding of Marx.</p>
                <a> Nationalities</a>
            </div>
        </div>
    </div>
</body>

</html>